<template>
    <div>
        <div class="mui-numbox" data-numbox-min='1'>
            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
            <input id="test" class="mui-input-numbox" type="number" value="1" @change="countchange" ref="numbox" />
            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>

            <!-- 这里无论点了 + 还是 -，或者是直接在数字框输入数字，都要将数量传回给父组件，方便点击加入购物车可以获取到购买数量 -->
            <!-- 这里直接使用 input 数字框的 change 事件即可替代 +-的各自点击事件，只要数字框的值一改变，就将数量传回给父组件 -->
        </div>
    </div>
</template>

<script>
import mui from "../../lib/mui/js/mui.min.js"

export default {
    mounted(){
        // 页面 dom 元素等挂载完毕，初始化 mui 的数字输入框
        mui(".mui-numbox").numbox();        
    },
    methods:{
        // 数字框一改变，就利用 ref 获取数字框元素的值，传回给父组件
        countchange(){
            // 调用父组件传递过来的事件名getcount，并把数字框的值传回给父组件
            this.$emit("getcount",this.$refs.numbox.value);
        }
    },
    // 接收 商品详情页面 传递过来的 库存数量，在选购数量上最多不能超过这个值
    props:["maxnum"],
    // 问题分析：由于商品详情获取详情数据是异步请求，所以我们不知道什么时候能够拿到 maxnum 值，但总归会拿到
    // 解决办法：我们使用 watch 监听父组件传递过来的 maxnum 值的变化，不管监听了几次，但最后一次 maxnum 肯定是一个合法的值
    watch:{
        // 属性监听
        maxnum(newVal,oldVal){
            // 使用 mui 官网的数字框组件的 js api 来设置 numbox 的最大值
            mui(".mui-numbox").numbox().setOption('max',newVal);
        }
    }
}
</script>

<style lang="scss" scoped>

</style>